import React, { useState, useEffect } from 'react'
// store是我们自己写的,所以可以明确的知道store.js在哪里,可以很容易的引入进来
import store from '../redux/store'
// 引入actionCreator
import { add } from '../redux/actions'
export default function Zs() {
  const [x, setX] = useState('x')
  useEffect(() => {
    // 监听redux数据的变化,当redux数据发生变化,则让当前组件更新
    store.subscribe(() => {
      console.log('redux数据发生变化了')
      setX((x) => {
        return x + 'x'
      })
    })
  }, [])

  return (
    <div>
      <p>{store.getState().zs.count}</p>
      <button
        onClick={() => {
          store.dispatch(add(2))
        }}
      >
        +2
      </button>
      <button
        onClick={() => {
          store.dispatch(add(8))
        }}
      >
        +8
      </button>
    </div>
  )
}
